<!DOCTYPE >
<html lang="zh-cn">
<head>
		<title>后台管理-功能</title>
    <% include ../partials/head %>
    <style type="text/css">
        .model{display: none;}
        .debind{display: none}
        .usersave{display: none}
        .moveup{display: none}
        .hasBind{display: block}
        .hasBind .bind_user{display: none}
        .hasBind .remove_content{display: none}
        .hasBind .debind{display: block}
        .hasBind .usersave{display: block}
        .hasBind .moveup{display: block}

    </style>
    <script type="text/javascript">
        oEdit={
            operation:function(){
                $(".user_content").on("click",".upload",function(){
                    $parent=$(this).parent();
                    var imgPath = $parent.find(".userImg").val();  
                    if (imgPath == "") {  
                        alert("请选择上传图片！");  
                        return;  
                    } 
                    var data = new FormData();
                    data.append('img',$parent.find(".userImg")[0].files[0]);
                    $.ajax({
                        url:"/admin/article/upload",
                        type:"POST",
                        data:data,
                        cache:false,
                        contentType:false,
                        processData:false,
                        success:function(json){
                            if(json.code==0){
                                $parent.find(".imgurl").html(json.url);
                                $parent.find(".img")[0].src=json.url;
                            }else{
                                alert(json.msg);
                            }
                        }
                    })

                })
            },
            add:function(){
                $('.addOneUser').on("click",function(){
                    $($(".model")[0]).clone().show().appendTo($('.user_content'));
                })

                $(".user_content").on("click",".remove_content",function(){
                    //取消编辑
                    $(this).parents(".model").remove();
                }).on("click",".bind_user",function(){
                    //绑定用户
                    $this=$(this);
                    $(this).parents(".model").addClass("hasBind");
                    var userId = $(this).parents(".model").find("select").val();
                    var articleId = $(this).attr("articleId");
                    $.post("/admin/article/bind",{
                        "userId":userId,
                        "articleId":articleId,
                        "content": oEdit.getContent()
                    },function(json){
                        if(json.code==0){
                            $this.parents(".model").find(".remove_content").hide();
                            $this.parents(".model").find(".bind_user").hide();
                            $this.parents(".model").find(".debind").show();
                        }else{
                            $this.parents(".model").removeClass("hasBind");
                            alert(json.msg);
                        }
                    },"json")
                }).on("click",".debind",function(){
                    //取消绑定
                    if(window.confirm('你确定要解除该用户的绑定？')){
                        $this=$(this);
                        var userId = $(this).parents(".model").find("select").val();
                        var articleId = $(this).attr("articleId");
                        $(this).parents(".model").remove();
                        $.post("/admin/article/unbind",{
                            "userId":userId,
                            "articleId":articleId,
                            "content": oEdit.getContent()
                        },function(json){
                            if(json.code==0){
                                alert(json.msg);
                            }else{
                                alert(json.msg);
                            }
                        },"json")
                    }else{
                        //取消
                    }
                }).on("click",".usersave",function(){
                    $this = $(this);
                    userId = $(this).parents(".model").find("select").val();
                    var articleId = $(this).attr("articleId");
                    $.post("/admin/article/bind",{
                        "articleId":articleId,
                        "content": oEdit.getContent()
                    },function(json){
                        if(json.code==0){
                            alert(json.msg);
                        }else{
                            alert(json.msg);
                        }
                    },"json")
                }).on("click",".moveup",function(){
                    $this = $(this);
                    if(window.confirm('你确定向上移动？')){
                        $parent=$this.parents(".model");
                        $parent.prependTo($(".user_content"));
                        var userId = $(this).parents(".model").find("select").val();
                        var articleId = $(this).attr("articleId");
                        $.post("/admin/article/bind",{
                            "articleId":articleId,
                            "content": oEdit.getContent()
                        },function(json){
                            if(json.code==0){
                                alert(json.msg);
                            }else{
                                alert(json.msg);
                            }
                        },"json")
                    }else{
                        //取消
                    }
                    
                })

            },
            getContent:function(){
                var content='';
                $(".hasBind").each(function(index){
                    if(index==0){
                        num="一";
                    }else if(index==1){
                        num="二";
                    }else if(index==2){
                        num="三";
                    }else if(index==3){
                        num="四";
                    }else if(index==4){
                        num="五";
                    }else if(index==5){
                        num="六";
                    }else if(index==6){
                        num="七";
                    }else if(index==7){
                        num="八";
                    }
                    var name= $.trim($(this).find('select option:selected').text());
                    content+='<div class="item"><h2 username="'+name+'">推荐'+num+':'+name+'</h2>'+
                    $(this).find(".titleContent").val()+'<hr/><span userId="'+$(this).find('select').val()+'">查看资料</span>'
                })
                return content;
            },
            init:function(){
                this.operation();
                this.add();
            }
        }
        $(document).ready(function(){
            oEdit.init();
        })
    </script>

</head>
<body>
	<header>
    <% include ../partials/header %>
  </header>
  <div class="ch-container">
    <div class="row">
      <% include ../partials/sidebar %>
      <!-- 页面内容 -->
      <div id="content" class="col-lg-10 col-sm-10">
        <div class="row">
          <ul class="breadcrumb">
            <li>
                <a href="/admin/article">文章管理</a>
            </li>
            <li>
                <a href="">编辑</a>
            </li>
          </ul>
        </div>

        <% if (typeof errMsg != "undefined") { %>
        <div class="alert alert-danger">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            <strong><%= errMsg %></strong>
        </div>
        <% } %>


        <div class="row">
          <div class="box col-md-12">
            <div class="box-inner">
              <div class="box-header well" data-original-title="">
                <h2><i class="glyphicon glyphicon-edit"></i> 编辑文章 </h2>
              </div>

              <div class="box-content">
                <form role="form" method="post" enctype="multipart/form-data" action="/admin/article/edit" id="articleForm">

                  <div class="form-group">
                      <label>标题:</label>
                      <input type="text" name="title" class="form-control" id="titleText" placeholder="输入标题" value=<%= article.get("title") %> >
                  </div>
                  <div class="form-group">
                      <label>标题图片:</label>
                      <input type="file" name="articleImg">
                      <% if (article.get("title_img")) { %>
                      <div >
                        <img class="grayscale" style="max-height:200px" src=<%= article.get("title_img")._url %> >
                      </div>
                      <% } %>

                  </div>

                  <div class="form-group">
                      <label >文章介绍:</label>
                      <textarea rows="5" name="intro" form="articleForm" class="form-control" id="introText" placeholder="输入文章介绍"> <%= article.get("intro") %> </textarea>
                  </div>

                  <div class="form-group">
                    <label >所属专题:</label>
                    <select id="topicSelector" name="topicId">
                        <option value="">不属于任何专题</option>
                        <% if (typeof topics != "undefined") { %>
                          <% topics.forEach(function(topic) { %>
                          <option value="<%= topic.id %>" <% if (article && article.get("topic") && topic.id === article.get("topic").id) { %> selected="selected" <% } %> > <%= topic.get("title") %></option>
                          <% }) %>
                        <% } %>
                    </select>
                  </div>

                  <div class="form-group">
                      <label >文章开头斜体编辑:（example：/ 听说下雨天 音乐和巧克力更配哦 /）</label>
                      <input type="text" class="form-control" name="italicText"  id="italicTextView" value="<%= italicText%>" placeholder="输入文章斜体内容"/>
                  </div>
                  <div class="model box-inner">
                        <div class="form-group">
                            <label >选择编辑推荐的人:</label>
                            <select class="userSelector" >
                            <% if (typeof users != "undefined") { %>
                              <% users.forEach(function(user) { %>
                              <option value="<%= user.id %>">  <%= user.get("nickname") %></option>
                              <% }) %>
                            <% } %>
                            </select>
                            <span class="btn btn-info pull-right moveup"  articleId="<%=article.id%>">
                                <i class="glyphicon glyphicon-arrow-up"></i> 向上移动
                            </span>
                            <span class="btn btn-success pull-right usersave"  articleId="<%=article.id%>">
                                <i class="glyphicon glyphicon-edit"></i> 确认修改
                            </span>
                            <span class="btn btn-danger pull-right debind"  articleId="<%=article.id%>">
                                <i class="glyphicon glyphicon-remove"></i> 取消绑定并删除
                            </span>
                            <span class="btn btn-default pull-right bind_user"  articleId="<%=article.id%>">
                                <i class="glyphicon glyphicon-plus green"></i> 确定绑定
                            </span> 
                            <span class="btn btn-danger pull-right remove_content"  >
                                <i class="glyphicon glyphicon-remove "></i> 取消编辑
                            </span>                 
                        </div>

                        <div class="upload_content">
                            <label >上传该人所需的图片:</label>
                            <div>
                                <input type="file" class="userImg">
                                <span class="btn btn-default upload"  >
                                    <i class="glyphicon glyphicon-plus green"></i>上传
                                </span>
                                <img class="grayscale img" style="max-height:100px">
                                <span class="imgurl"></span>
                            </div>
                            <div>
                                <input type="file" class="userImg">
                                <span class="btn btn-default upload"  >
                                    <i class="glyphicon glyphicon-plus green"></i>上传
                                </span>
                                <img class="grayscale img" style="max-height:100px">
                                <span class="imgurl"></span>
                            </div>
                            <div>
                                <input type="file" class="userImg">
                                <span class="btn btn-default upload"  >
                                    <i class="glyphicon glyphicon-plus green"></i>上传
                                </span>
                                <img class="grayscale img" style="max-height:100px">
                                <span class="imgurl"></span>
                            </div>
                            <div>
                                <input type="file" class="userImg">
                                <span class="btn btn-default upload"  >
                                    <i class="glyphicon glyphicon-plus green"></i>上传
                                </span>
                                <img class="grayscale img" style="max-height:100px">
                                <span class="imgurl"></span>
                            </div>
                            <div>
                                <input type="file" class="userImg">
                                <span class="btn btn-default upload"  >
                                    <i class="glyphicon glyphicon-plus green"></i>上传
                                </span>
                                <img class="grayscale img" style="max-height:100px">
                                <span class="imgurl"></span>
                            </div>
                            <div>
                                <input type="file" class="userImg">
                                <span class="btn btn-default upload"  >
                                    <i class="glyphicon glyphicon-plus green"></i>上传
                                </span>
                                <img class="grayscale img" style="max-height:100px">
                                <span class="imgurl"></span>
                            </div>
                        </div>

                        <div>
                            <label >书写文章内容:(exmaple: )</label>
                            <textarea rows="5" class="form-control titleContent" id="introText" placeholder='<p>文章内容</p><img src="你所传图片的网址"/> '></textarea>
                        </div>

                  </div>
                  <div class="user_content">
                    <% if (typeof usercontent != "undefined") { %>
                      <% usercontent.forEach(function(ucontent) { %>
                        <div class="model box-inner hasBind">
                            <div class="form-group">
                                <label >用户:</label>
                                <select class="userSelector" >
                                    <option value="<%= ucontent.id %>">  <%= ucontent.name%></option>                                  
                                </select>                                 
                                <span class="btn btn-info pull-right moveup"  articleId="<%=article.id%>">
                                    <i class="glyphicon glyphicon-arrow-up"></i> 向上移动
                                </span>
                                <span class="btn btn-success pull-right usersave"  articleId="<%=article.id%>">
                                    <i class="glyphicon glyphicon-edit"></i> 确认修改
                                </span>
                                <span class="btn btn-danger pull-right debind"  articleId="<%=article.id%>">
                                    <i class="glyphicon glyphicon-remove"></i> 取消绑定并删除
                                </span>
                                <span class="btn btn-default pull-right bind_user"  articleId="<%=article.id%>">
                                    <i class="glyphicon glyphicon-plus green"></i> 确定绑定
                                </span> 
                                <span class="btn btn-danger pull-right remove_content"  >
                                    <i class="glyphicon glyphicon-remove "></i> 删除文章中的该人
                                </span>                 
                            </div>

                            <div class="upload_content">
                                <label >上传该人所需的图片:</label>
                                <div>
                                    <input type="file" class="userImg">
                                    <span class="btn btn-default upload"  >
                                        <i class="glyphicon glyphicon-plus green"></i>上传
                                    </span>
                                    <img class="grayscale img" style="max-height:100px">
                                    <span class="imgurl"></span>
                                </div>
                                <div>
                                    <input type="file" class="userImg">
                                    <span class="btn btn-default upload"  >
                                        <i class="glyphicon glyphicon-plus green"></i>上传
                                    </span>
                                    <img class="grayscale img" style="max-height:100px">
                                    <span class="imgurl"></span>
                                </div>
                                <div>
                                    <input type="file" class="userImg">
                                    <span class="btn btn-default upload"  >
                                        <i class="glyphicon glyphicon-plus green"></i>上传
                                    </span>
                                    <img class="grayscale img" style="max-height:100px">
                                    <span class="imgurl"></span>
                                </div>
                                <div>
                                    <input type="file" class="userImg">
                                    <span class="btn btn-default upload"  >
                                        <i class="glyphicon glyphicon-plus green"></i>上传
                                    </span>
                                    <img class="grayscale img" style="max-height:100px">
                                    <span class="imgurl"></span>
                                </div>
                                <div>
                                    <input type="file" class="userImg">
                                    <span class="btn btn-default upload"  >
                                        <i class="glyphicon glyphicon-plus green"></i>上传
                                    </span>
                                    <img class="grayscale img" style="max-height:100px">
                                    <span class="imgurl"></span>
                                </div>
                                <div>
                                    <input type="file" class="userImg">
                                    <span class="btn btn-default upload"  >
                                        <i class="glyphicon glyphicon-plus green"></i>上传
                                    </span>
                                    <img class="grayscale img" style="max-height:100px">
                                    <span class="imgurl"></span>
                                </div>
                            </div>

                            <div>
                                <label >书写文章内容:(exmaple: )</label>
                                <textarea rows="5" class="form-control titleContent" id="introText" placeholder='<p>文章内容</p><img src="你所传图片的网址"/> '>
                                <%=ucontent.content%>
                                </textarea>
                            </div>

                      </div>
                      <% }) %>
                    <% } %>
                  </div>
                  <div class="form-group">
                      <div><span class="btn btn-success addOneUser">绑定一个用户到文章</span></div>
                  </div>



                  <input type="hidden" name="objectId" value=<%= article.id %> >

                  <button class="btn btn-success" id="saveArticle"><i class="glyphicon glyphicon-shopping-cart"></i>保存</button>
                </form>
              </div>

            </div>
          </div>
        </div>
      </div>

    </div>

    <% include ../partials/footer %>
  </div>
  <% include ../partials/external %>
</body>
</html>
